<template>
	<view class="wrap">
		<up-swipe-action :autoClose="true">
			<up-swipe-action-item v-model:show="show" :options="options" v-for="(item,index) in 10" :key="index" :index="index" :name="index" @click="handleActionItem" style="margin-bottom: 30rpx;">
				<view class="wrap-list" @click="goDetail">
					<view class="wrap-list-info">
						<view class="wrap-list-info-content align-center">
							<view class="wrap-list-info-content-atv">
								<up-image src="/static/images/agreeBg.png" :fade="false" width="120rpx" height="120rpx" radius="12rpx"></up-image>
							</view>
							<view class="wrap-list-info-content-name">
								<view class="wrap-list-info-title">
									昵称
								</view>
								<view class="wrap-list-info-content-name-name">
									聂小倩
								</view>
							</view>
						</view>
					</view>
				</view>
			</up-swipe-action-item>
		</up-swipe-action>
		<up-modal width="480rpx" :show="modalShow" content="加入黑名单后TA的信息将不再显示，确认修改吗？" :showCancelButton="true" @confirm="modalConfirm" @cancel="modalCancel" confirmColor="#006FFF" cancelColor="#006FFF">
		</up-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const show = ref(false)
	const modalShow = ref(false)
	// 使用 reactive 创建响应式对象  
	const options = reactive([{
		text: '黑名单',
		style: {
			backgroundColor: '#444444'
		}
	},{
		text: '删除',
		style: {
			backgroundColor: '#F01E1E'
		}
	}]);
	
	const goDetail = () => {
		uni.navigateTo({
			url:"/pages/home/detail?router=haveMet"
		})
	}
	
	const handleActionItem = (opt) => {
		const {index,name} = opt
		console.log(index)
		if(index === 0){
			modalShow.value = true
		}
	}
	
	const modalConfirm = () => {
		modalShow.value = false
	}
	
	const modalCancel = () => {
		modalShow.value = false
	}
</script>

<style lang="scss" scoped>
	.wrap {
		padding: 30rpx;
		box-sizing: border-box;

		&-list{
			height: 200rpx;
			background-color: #fff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			&-info{
				padding: 40rpx;
				box-sizing: border-box;
				&-content{
					&-name{
						margin-left: 16rpx;
						&-title{
							margin-bottom: 20rpx;
							font-size: 30rpx;
							color: #444444;
						}
						&-name{
							font-weight: bold;
							font-size: 34rpx;
							color: #222222;
						}
					}
				}
			}
		}
	}
</style>